@import '~styles/config.scss';

.DesignTabs {
    height: 100%;

    box-sizing: border-box;

    .tabsHead {
        padding      : 14px;
        // background: $--background-color-base;
        border-bottom: 1px solid #f0f0f0;
        // border-top: 1px solid #f0f0f0;

        .hover {
            transition: all 0.5s;
        }

        >.ul {
            border-radius: 8px;
            // background: #fafafa;
            display      : flex;
            position     : relative;


            padding-left: 1px;

            >.li {
                cursor     : pointer;
                transition : all .5s;
                position   : relative;
                flex       : 1;
                text-align : center;
                line-height: 40px;
                color      : $--color-text-regular;
                font-size  : 14px;
                margin-left: -1px;
                border     : 1px solid $--border-color-lighter;

                &:hover {
                    background: #fff;
                }

                &.true {
                    box-shadow      : 0px 0px 5px rgba($color: #000000, $alpha: 0.1) inset;
                    z-index         : 1;
                    border-color    : $--border-color-base;
                    color           : $--color-text-regular;
                    background-color: $--background-color-base;
                }

                &:first-of-type {
                    border-radius: 6px 0px 0px 6px;
                }

                &:last-of-type {
                    border-radius: 0px 6px 6px 0px;
                }

                i {
                    margin-right: 6px;
                }

                span {}
            }

        }


    }

    .tabsMain {
        height    : calc(100% - 81px);
        box-sizing: border-box;
        overflow  : hidden;
        overflow-y: auto;


    }

    &.nh {
        .tabsMain {
            height: calc(100%);
        }

    }
}